<template>
    <div class="common-layout" style="height: 100%;">
        <el-container>
            <el-header>
                <div class="heard">
                    在线答题系统
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                                default-active="0" text-color="#fff">
                                <el-menu-item @click="tab(item.path)" v-for="item, index in aside" :index="index + ''">
                                    <el-icon>
                                        <icon-menu />
                                    </el-icon>
                                    <span>{{ item.title }}</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import axios from 'axios'
import { ref } from 'vue';
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let aside = ref(
    [
        {
            title: '所有题集',
            path: '/all',
        },
        {
            title: '错题集',
            path: '/no',
        },
        {
            title: '收藏夹',
            path: '/sc',
        },
    ]
)

function tab(path) {
    router.push({
        path: path,
    })
}
axios({
    url: 'http://127.0.0.1:4523/m1/3885028-0-default/ti',
    method: 'get',
}).then(res => {
    localStorage.setItem('array', JSON.stringify(res.data.data))
})
</script>
<style scoped>
.el-header::v-deep {
    background-color: rgb(32, 48, 61);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.el-col-12::v-deep {
    max-width: none;
    flex: 1;
}

.is-vertical::v-deep {
    height: 100%;
}

.tac::v-deep {
    height: 100%;
}

.el-menu-vertical-demo::v-deep {
    height: 100%;
}
</style>
